<template>
    <div class="hotBody">
        <div class="container-water-fall">
            <waterfall :col="col" :data="data" @loadmore="loadmore" @onload="scroll">
                <template>
                    <div
                        class="cell-item"
                        v-for="(item,index) in data"
                        :key="index"
                        @click="toSeeSee(item.id)"
                    >
                        <img v-if="item.img" :src="item.img" alt="加载错误" width="100%" />
                        <div class="item-body">
                            <div class="item-desc">{{item.title}}</div>
                        </div>
                    </div>
                </template>
            </waterfall>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            data: [
                {
                    id: "1",
                    img: require("../../../static/images/hot_1.jpg"),
                    title: "北京天坛"
                },
                {
                    id: "2",
                    img: require("../../../static/images/hot_2.jpg"),
                    title: "上海"
                },
                {
                    id: "3",
                    img: require("../../../static/images/hot_3.jpg"),
                    title: "撒哈拉大沙漠"
                },
                {
                    id: "4",
                    img: require("../../../static/images/hot_4.jpg"),
                    title: "古罗马竞技场"
                },
                {
                    id: "5",
                    img: require("../../../static/images/hot_5.jpg"),
                    title: "阿尔卑斯山"
                },
                {
                    id: "6",
                    img: require("../../../static/images/hot_6.jpg"),
                    title: "桂林"
                },
                {
                    id: "7",
                    img: require("../../../static/images/hot_7.jpg"),
                    title: "故宫"
                },
                {
                    id: "8",
                    img: require("../../../static/images/hot_8.jpg"),
                    title: "东京"
                },
                {
                    id: "9",
                    img: require("../../../static/images/hot_9.jpg"),
                    title: "悉尼"
                },
                {
                    id: "10",
                    img: require("../../../static/images/hot_10.jpg"),
                    title: "纽约"
                },
                {
                    id: "11",
                    img: require("../../../static/images/hot_11.jpg"),
                    title: "威尼斯"
                },
                {
                    id: "12",
                    img: require("../../../static/images/hot_12.jpg"),
                    title: "曼哈顿"
                },
                {
                    id: "13",
                    img: require("../../../static/images/hot_13.jpg"),
                    title: "南非"
                },
                {
                    id: "1",
                    img: require("../../../static/images/hot_1.jpg"),
                    title: "北京天坛"
                },

                {
                    id: "9",
                    img: require("../../../static/images/hot_9.jpg"),
                    title: "悉尼"
                },
                {
                    id: "10",
                    img: require("../../../static/images/hot_10.jpg"),
                    title: "纽约"
                },
                {
                    id: "11",
                    img: require("../../../static/images/hot_11.jpg"),
                    title: "威尼斯"
                },
                {
                    id: "2",
                    img: require("../../../static/images/hot_2.jpg"),
                    title: "上海"
                },
                {
                    id: "3",
                    img: require("../../../static/images/hot_3.jpg"),
                    title: "撒哈拉大沙漠"
                },
                {
                    id: "4",
                    img: require("../../../static/images/hot_4.jpg"),
                    title: "古罗马竞技场"
                },
                {
                    id: "5",
                    img: require("../../../static/images/hot_5.jpg"),
                    title: "阿尔卑斯山"
                },
                {
                    id: "6",
                    img: require("../../../static/images/hot_6.jpg"),
                    title: "桂林"
                },
                {
                    id: "7",
                    img: require("../../../static/images/hot_7.jpg"),
                    title: "故宫"
                },
                {
                    id: "8",
                    img: require("../../../static/images/hot_8.jpg"),
                    title: "东京"
                },
                {
                    id: "12",
                    img: require("../../../static/images/hot_12.jpg"),
                    title: "曼哈顿"
                },
                {
                    id: "13",
                    img: require("../../../static/images/hot_13.jpg"),
                    title: "南非"
                }
            ],
            col: 5
        };
    },
    methods: {
        scroll(scrollData) {
            // console.log("scrollData");
        },
        loadmore(index) {
            this.data = this.data.concat(this.data);
        },
        toSeeSee(id) {
            this.$router.push({
                path: "/scenery",
                id: id
            });
        }
    }
};
</script>
<style>
div.hotBody {
    margin: 10px 50px;
}
div.hotBody .cell-item:hover {
    transform: scale(1.02);
    /* 放大图片 */
    box-shadow: 5px 5px 3px rgba(64, 160, 255, 0.74);
    transition: all 0.3s ease-in-out;
}
div.hotBody .cell-item {
    border: 8px white solid;
    margin: 10px 5px;
    outline: rgba(64, 160, 255, 0.74) 2px solid;
}
</style>